<template>
	<div class="login">
		<img src="../../static/image/logo.png" class="logo" />
		<div class="circle"></div>
		<img src="../../static/image/genesyslogo.png" class="genesysLogo" />
		<div class="content">
			<img src="../../static/image/loginicon.png" class="image" />
			<div class="right">
				<div class="title">zealcomm-genesys</div>
				<div class="subtitle">欢迎登录</div>
				<Input class="input" style="margin-top: 20px" placeholder="请输入用户名" v-model="name"></Input>
				<Input class="input" style="margin-top: 20px" placeholder="请输入密码" v-model="pwd" type="password"></Input>
				<div class="btn" @click="agentlogin">登录</div>
			</div>
		</div>
	</div>
</template>

<script>
import { login, storageLoginData, setUrl } from '../api/api';
export default {
	name: 'GenesysLogin',
	data() {
		return {
			name: null,
			pwd: null
		};
	},
	mounted() {
		//软键盘回车事件
		var self = this;
		document.onkeydown = function(event) {
			var e = event || window.event;
			if (e.keyCode === 13) {
				self.agentlogin();
			}
		};
	},
	methods: {
		/*agent login*/
		agentlogin() {
			if (this.name == null || this.name == '') {
				this.$Message.info('请输入用户名');
				return;
			} else if (this.pwd == null || this.pwd == '') {
				this.$Message.info('请输入密码');
				return;
			}
			var self = this;
			login(this.name, this.pwd, 'genesys').then(function(resp) {
				if (resp.status == 200) {
					if (resp.data.code == 200) {
						var result = jwt.decode(resp.data.data.accessToken);
						console.log(result);
						storageLoginData(result, resp);
						setUrl();
						self.$router.push('/agent');
					} else {
						self.$Message.error(resp.data.message);
					}
				} else {
					self.$Message.error(resp.statusText);
				}
			});
		},

		showpwd() {
			let password = document.getElementById('password');
			if (password.type === 'password') {
				password.type = 'text';
				this.eyesimage = eyes;
			} else {
				password.type = 'password';
				this.eyesimage = uneyes;
			}
		}
	}
};
</script>

<style scoped>
.login {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #00ff00;
	background: url('../../static/image/background.png');
	background-repeat: no-repeat;
	background-size: 1920px, 1080px;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.logo {
	left: 30px;
	top: 30px;
	width: 144px;
	height: 30px;
	position: absolute;
}

.circle {
	width: 10px;
	height: 10px;
	background: rgba(255, 255, 255, 1);
	opacity: 0.68;
	position: absolute;
	left: 180px;
	top: 40px;
	border-radius: 5px;
}

.genesysLogo {
	left: 200px;
	top: 30px;
	width: 120px;
	height: 30px;
	position: absolute;
	object-fit: contain;
}

.content {
	width: 580px;
	height: 333px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 2px 7px 115px 10px rgba(47, 112, 158, 0.4);
	border-radius: 13px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

.image {
	width: 239px;
	height: 192px;
}

.right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	margin-left: 50px;
}

.title {
	width: 270px;
	height: 29px;
	font-size: 15px;
	font-family: Source Han Sans CN;
	font-weight: bold;
	color: rgba(79, 79, 79, 1);
	line-height: 24px;
	text-align: left;
}

.subtitle {
	width: 270px;
	height: 18px;
	font-size: 9px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: rgba(194, 192, 192, 1);
	line-height: 18px;
	text-align: left;
}

.input {
	width: 250px;
	background: rgba(246, 246, 246, 1);
	border-radius: 3px;
}

.btn {
	width: 250px;
	height: 35px;
	background: rgba(44, 137, 234, 1);
	border-radius: 16px;
	margin-top: 40px;
	font-size: 9px;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	line-height: 35px;
	cursor: pointer;
}
</style>
